<template>
    <div>
        <el-row>
            <el-col :span="8">
                
                    是否开启预设问题
                    <el-switch
                        v-model="yswt"
                        >
                    </el-switch>
                
            </el-col>
              <el-col :span="2" style="float:right">
                    <el-button type="primary" size="small" @click="dialogaddpp = true" >添加问题</el-button>
                     <el-dialog
                            title="添加问题"
                            :visible.sync="dialogaddpp"
                            width="500px"
                                    align="left"
                                >
                            <el-form :model="addpp" :rules="ppaddrules" ref="add_pp">
                                <el-form-item label="问题" prop="q_content">
                                    <el-input type="text" v-model="addpp.q_content" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="答案" prop="q_answer">
                                    <el-input type="text" v-model="addpp.q_answer" autocomplete="off"></el-input>
                                </el-form-item>
                            
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogaddpp = false">取 消</el-button>
                            <el-button type="primary" @click="addppsj('add_pp')">确 定</el-button
                            >
                            </div>
                        </el-dialog>
            </el-col>
       </el-row>
       <el-row style="margin-top:30px">
            <el-table
                    ref="multipleTable"
                    :header-cell-style="{background:'#e5f1ff',color:'#606266'}"
                    :data="setupPpData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    tooltip-effect="dark" 
                    style="width: 100%"
                    >
                    <el-table-column
                    label="预设问题"
                    prop="q_content"
                     align="center">
                    
                    </el-table-column>

                    <el-table-column
                    prop="q_answer"
                    label="答案"
                    width="500"
                     align="center">
                    </el-table-column>

                    <el-table-column
                    prop="c_time"
                    label="创建时间"
                     align="center">
                    </el-table-column>

                     <el-table-column
                    prop="chaoz"
                    label="操作"
                     align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="updateid(scope.$index)">编辑</el-button>
                            <el-button type="text" size="small" @click="deleteid(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div>
                       <el-dialog
                            title="修改问题"
                            :visible.sync="dialogupdatepp"
                            width="500px"
                                    align="left"
                                >
                            <el-form :model="setupPpUpdate" :rules="ppupdaterules" ref="update_pp">
                                <el-form-item label="问题" prop="q_content">
                                    <el-input type="text" v-model="setupPpUpdate.q_content" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="答案" prop="q_answer">
                                    <el-input type="text" v-model="setupPpUpdate.q_answer" autocomplete="off"></el-input>
                                </el-form-item>
                            
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogupdatepp = false">取 消</el-button>
                            <el-button type="primary" @click="updateppsj('update_pp')">确 定</el-button
                            >
                            </div>
                        </el-dialog>


                           <el-dialog
                                    title="删除确认"
                                    :visible.sync="dialogdeletepp"
                                    width="500px"
                                >
                                    <el-form>
                                    <el-form-item style="margin: 0px">
                                        <label> 确定删除此信息吗？</label>
                                    </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogdeletepp = false">取 消</el-button>
                                    <el-button type="primary" @click="deleteppsj()">确 定</el-button
                                    >
                                    </div>
                                </el-dialog>
                </div>
                <el-row style="margin-top:20px">
                    <div class="block">
                       <el-button style="float:right;margin-left:20px" size="small">确定</el-button>
                        <el-pagination
                         @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            style="float: right"
                            background
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :current-page="currentPage"
                        :total="setupPpData.length">
                        </el-pagination>
                      
                       
                    </div>
                </el-row>
       </el-row>
    </div>
</template>
<style scoped>

#search {
padding: 11px;
  background-color: #0170f3;
  border-radius: 0%;
  color: #ffffff;
 
} 
.el-button{
    padding: 12px 12px;
    border-radius: 0px;
}

</style>
<script>
import {mapState} from 'vuex'
export default {
    name:"PresuppositionProblem",
    data(){
        return{
            //滑块
            yswt:true,
            //状态
            status:"1",
            //添加框
            dialogaddpp:false,
            //删除框
            dialogdeletepp:false,
            //修改框
            dialogupdatepp:false,
            //修改id下标
            updateppid:"",
            //删除id下标
            deleteppid:"",
             //翻页一页显示多少数据设置的默认值
            pageSize:10,
            //现在是第几页刚开始显示的默认值
            currentPage:1,
            //添加
            addpp:{
                q_content:'',
                q_answer:''
            },
            //添加规则
            ppaddrules:{
                  q_content:[
                     { required: true, message: '请输入问题内容', trigger: 'blur' }
                ],
                  q_answer:[
                     { required: true, message: '请输入问题的答案', trigger: 'blur' }
                ]
            },
            //修改规则
            ppupdaterules:{
                  q_content:[
                     { required: true, message: '请输入问题内容', trigger: 'blur' }
                ],
                  q_answer:[
                     { required: true, message: '请输入问题的答案', trigger: 'blur' }
                ]
            }

        }
    },
     computed:{
        ...mapState("SetupModule",["setupPpData","setupPpUpdate"])
    },
       mounted(){
        this.$store.dispatch("SetupModule/ppall",{status:this.status})
    },
    methods:{
        addppsj(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                
                this.$store.dispatch("SetupModule/ppadd", this.addpp)
                this.dialogaddpp = false; //关闭弹出框
                } else {
                    this.$message({
                        showClose: true,
                        message: '请把内容完善',
                        type: 'error'
                    });
                }
            });
        },
        //修改获取id
        updateid(i){
            this.dialogupdatepp = true
            
            this.$store.commit('SetupModule/updatepp',i)
        },
        //修改
        updateppsj(formName){
             this.$refs[formName].validate((valid) => {
                if (valid) {
                
                this.$store.dispatch("SetupModule/ppupdate", this.setupPpUpdate)
                this.dialogupdatepp = false; //关闭弹出框
                } else {
                    this.$message({
                        showClose: true,
                        message: '请把内容完善',
                        type: 'error'
                    });
                }
            });
        },
        //删除获取id
        deleteid(i){
            this.deleteppid = i
            this.dialogdeletepp = true
        },
        deleteppsj(){
                 this.$store.dispatch("SetupModule/ppdelete", this.deleteppid)
                 this.dialogdeletepp = false
        },
          //翻页器
        //这是修改当前页面显示多少条数据
        handleSizeChange: function (size) {
            this.pageSize = size;
            console.log("这是上面的"+this.pageSize);
        },
        //这是点击多少页时发生的
        handleCurrentChange: function(currentPage){
            this.currentPage = currentPage;
            console.log("这是下面的"+this.currentPage);
        }

    }
}
</script>